<template>
  <div>
    <!-- 工作区Tabs页 -->
    <el-tabs type="card"
             v-model="activeName"
             class="el-tag-custom"
             @tab-click="tabClickHandler"
             @tab-remove="tabRemoveHandler">
      <el-tab-pane
        v-for="(item, index) in tags"
        :lazy="true"
        :closable="index >= unclosable"
        :key="item.name"
        :label="item.name"
        :name="item.name"
        :class="{'is-active':activeName === item.name}"/>
    </el-tabs>
    <!-- 工作区路由 -->
    <router-view style="padding-left: 10px"/>
  </div>
</template>

<script>
import {HOME_MENUS} from "@/store/const/const-home";

// 不可关闭的Tab项数量，即固定的项，如首页
const unclosable = 1;
export default {
  name: "HomeTabs",
  data() {
    return {
      // Tabs项数据，默认一个项是首页，不可移除
      tags: [HOME_MENUS[0]],
      // 当前激活的Tab项名称
      activeName: HOME_MENUS[0].name,
      // 不可关闭的Tab项数量
      unclosable
    };
  },
  mounted() {
    /**
     * 全局事件监听，该事件由首页左边菜单项激活发起，在工作区Tabs上添加上对应的Tab页
     */
    this.$bus.$on("home.menuItemClick", (item) => {
      // console.log('home.menuItemClick', item);
      // 在当前Tabs上查找是否存在该菜单项，如果存在则直接激活，否则添加一个Tab页并激活
      let tag = this.tags.find(tag => tag.id === item.id);
      if (tag) {
        this.activeName = tag.name;
      } else {
        this.tags.push(item);
        this.activeName = item.name;
      }
    });
  },
  methods: {
    /**
     * Tab项点击事件处理，在工作区跳转到当前页面，并通知主页左边菜单激活对应的项
     *
     * @param target
     */
    tabClickHandler(target) {
      let tab = this.tags[target.index];
      // 如果工作区Tab页是当前激活状态，则不作处理
      if (this.$route.path.indexOf(tab.path) !== -1) {
        return;
      }
      // 工作区跳转到对应的页面
      this.$router.replace(tab.path);
    },
    /**
     * Tab项移除事件处理，
     * 如果当前Tab页是激活状态，则移除该项后还要激活前一个Tab项，
     * 如果当前Tab页不是激活状态，则直接移除该项即可
     *
     * @param tabName
     */
    tabRemoveHandler(tabName) {
      // 查找点击Tab项的索引
      let clickIndex = this.tags.findIndex(item => item.name === tabName);
      // 查找当前激活项的索引
      let activeIndex = this.tags.findIndex(item => item.name === this.activeName);
      // 如果当前Tab页是激活状态，则需要激活前一个Tab项
      if (clickIndex === activeIndex) {
        let tab = this.tags[clickIndex - 1];
        this.activeName = tab.name;
        // 工作区跳转到对应的页面
        this.$router.replace(tab.path);
      }
      // 移除当前项数据
      this.tags.splice(clickIndex, 1);
    }
  }
}
</script>

<style scoped>

</style>
